Skip to content

fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1384

Merged
kirillzyusko merged 1 commit intokirillzyusko:mainfrom
vilson-junior-squadra:fix-modal-auto-sizing
Mar 20, 2026
Merged

fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1384
kirillzyusko merged 1 commit intokirillzyusko:mainfrom
vilson-junior-squadra:fix-modal-auto-sizing

Conversation

@vilson-junior-squadra
Copy link
Copy Markdown
Contributor

Description
When using KeyboardAwareScrollView inside a wrapper that sizes itself to its content (e.g., a Modal or Bottom Sheet without an explicit height constraint), the scroll view completely collapses to height 0.

This occurs because ReanimatedClippingScrollView within ScrollViewWithBottomPadding applies a hardcoded flex: 1 style. In React Native's Yoga layout engine, a flex: 1 (which acts as flexBasis: 0) child placed inside an unconstrained, self-sizing parent computes its available space as 0.

By substituting flex: 1 with flexGrow: 1 and flexShrink: 1, the layout maintains full backward compatibility for standard full-screen usages (it still stretches to fill an available Flex container) but gracefully falls back to its intrinsic content height when placed inside an auto-sizing wrapper.

Steps to Reproduce
Render KeyboardAwareScrollView inside a View that lacks absolute constraints or explicit flex stretching:

import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';

// E.g., An auto-height modal overlay container
export const SqueezedModalExample = () => (
  <View style={{ backgroundColor: 'white', borderRadius: 16 }}>
    {/* This will collapse to height 0 and completely disappear from the screen limits */}
    <KeyboardAwareScrollView>
      <Text>Title</Text>
      <TextInput placeholder="Type here..." />
    </KeyboardAwareScrollView>
  </View>
);

Version 1.21.1

Expected behavior
KeyboardAwareScrollView should accurately compute its size based on its children's intrinsic content height when the parent View is dynamically sizing itself.

Actual behavior
The component shrinks to a bounding box of height 0 because of the forced flex: 1 container style, making forms invisible inside auto-sized elements like custom Modals.

Solution
Replaced flex: 1 with { flexGrow: 1, flexShrink: 1 } inside src/components/ScrollViewWithBottomPadding/styles.ts. This effectively gives the container a flexBasis: 'auto', which solves the collapsing sequence.

Simulation

Before

image

After

image

@vilson-junior-squadra
Copy link
Copy Markdown
Contributor Author

vilson-junior-squadra commented Mar 20, 2026

@kirillzyusko Sorry for the mess, I had to close that other PR and open a new one. I asked antigravity to correct the style in the PR and he made a huge mess of it.

I had to create the PR by hand, the old-fashioned way, lol.

And sorry for the delay, I was busy at work.

@kirillzyusko kirillzyusko self-requested a review March 20, 2026 18:40
@kirillzyusko kirillzyusko added 🐛 bug Something isn't working KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component labels Mar 20, 2026
@kirillzyusko kirillzyusko self-assigned this Mar 20, 2026
@kirillzyusko kirillzyusko added the KeyboardChatScrollView 💬 Anything about chat functionality label Mar 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

📊 Package size report

Current size Target Size Difference
306954 bytes 306911 bytes 43 bytes 📈

@kirillzyusko kirillzyusko merged commit 2f82c43 into kirillzyusko:main Mar 20, 2026
14 of 16 checks passed
@kirillzyusko
Copy link
Copy Markdown
Owner

Thank you for the contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component KeyboardChatScrollView 💬 Anything about chat functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants